<template>
  <div>
    <div class="n-layout-page-header">
      <n-card :bordered="false" title="水印示例"> 水印示例 </n-card>
    </div>
    <n-card :bordered="false" class="mt-4 proCard">
      <n-grid cols="1" responsive="screen">
        <n-grid-item>
          <n-button type="primary" class="mr-2" @click="setWatermark('WaterMark Info1')">
            Create Watermark1
          </n-button>
          <n-button type="primary" class="mr-2" @click="setWatermark2('WaterMark Info2')">
            Create Watermark2
          </n-button>
          <n-button type="primary" class="mr-2" @click="setWatermark3('Custome Style WaterMark')">
            Create custom style Watermark
          </n-button>
          <n-button type="error" class="mr-2" @click="clear"> Clear Watermark1 </n-button>
          <n-button type="error" class="mr-2" @click="clearAll"> ClearAll </n-button>
          <n-button type="warning" class="mr-2" @click="setWatermark('WaterMark Info New')">
            Update Watermark1
          </n-button>
        </n-grid-item>
      </n-grid>
    </n-card>
  </div>
</template>

<script lang="ts" setup>
  import { onUnmounted, ref } from 'vue';
  import { useWatermark } from '@/hooks/web/useWatermark';

  const app = ref(document.body);

  const { setWatermark, clear, clearAll } = useWatermark();
  const { setWatermark: setWatermark2 } = useWatermark();
  const { setWatermark: setWatermark3 } = useWatermark(app, {
    fontColor: 'red',
    fontSize: 12,
    rotate: 30,
  });

  onUnmounted(() => {
    clearAll();
  });
</script>
